<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<navigation-link v-slot="{slotProps}">
				<!-- <span class="glyphicon glyphicon-search" aria-hidden="true"></span> -->
				<!-- 组件的插槽中的内容是可以直接使用父组件中的变量 -->
				{{msg}}
				{{slotProps}}
			</navigation-link>
		</div>
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component("navigation-link", {
				data: function() {
					return {
						url: "http://www.baidu.com",
						nlMsg: "navigation-link的变量"
					}
				},
				template: `
					<a
					  v-bind:href="url"
					  class="nav-link"
					>
					  <slot :slotProps="nlMsg">默认值</slot>
					</a>
				`
			});
			new Vue({
				el: "#app",
				data: {
					msg: "百度一下"
				}
			})
		</script>
		
	</body>
</html>
